<template>
  <div style="height: 100%;">
    <x-header :left-options="{backText: ''}">{{typeList[typeIndex]}}</x-header>
    <simple-search @onSearch="search" :placeholder="'输入名称搜索'">
    </simple-search>
    <!-- <custom-select :></custom-select> -->
    <div class="select">
      <div style="width: 50%">
        <button @click.stop='show=!show' style="width: 100%">验收类型<img src="src/assets/img/updownarrow.png" style="margin-left: 8px"></button>
        <transition name="slide">
          <ul v-if="show">
            <li v-for='(item, index) in typeList' :key='index'  @click="chooseType(index)" :class="{active: typeIndex == index}">{{item}}</li>
          </ul>
        </transition>
      </div>
      <div style="width: 50%">
        <button @click.stop='show1=!show1' style="width: 100%">状态选择<img src="src/assets/img/updownarrow.png" style="margin-left: 8px"></button>
        <transition name="slide">
          <ul v-if="show1">
            <li v-for='(item, index) in stateList' :key='index' @click="chooseState(index)" :class="{active: stateIndex == index}">{{item}}</li>
          </ul>
        </transition>
      </div>
      <div></div>
    </div>
    <div class="main-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <!-- content -->
        <div >
          <div v-for="(item, i) in list" :key="i" class="card" @click="openInfo(item)">
            <div class="title"><div class="bar"></div>{{item.INSPECTIONNAME || item.NAME || item.PARENTNAME}}</div>
            <div class="num">
              <div class="gray-label">子节点已检验个数</div>
              {{item.CHECKNUM || '0'}}
            </div>
            <div class="num">
              <div class="gray-label">子节点总数</div>
              {{item.COUNTNUM || '0'}}
            </div>
            <div :class="setClass(item.STATE)">{{item.STATE}}</div>
            <!-- <div v-if="!item.DATACONFIGS" class="warning">暂不支持移动端审批</div> -->
          </div>
        </div>
      </scroller>
      <div class="mask" v-show="show || show1" @click="close"></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "qualityList",
  components: {},
  mounted () { },
  data () {
    return {
      list: [],
      newList: [],
      page: 1,
      keyword: '',
      createPop: false,//弹出层是否创建
      loading: false,//下拉刷新时禁止无限加载
      show: false,
      show1: false,
      bizObj: 'SXDT_JYPYS_DETAIL',
      viewId: 'SXDT_JYPYS_LIST',
      typeIndex: 0,
      stateIndex: 0,
      typeList:[
        '检验批验收',
        '分项工程验收',
        '分部工程验收',
        '单位工程验收',
      ],
      stateList:[
        '全部',
        '待验收',
        '审核中',
        '整改中',
        '已验收',
      ],
    }
  },
  methods: {
    setClass(state){
      let obj = {state: true}
      if(state == '未验收'){
        obj[`class1`] = true
      }else if(state == '待验收'){
        obj[`class2`] = true
      }else if(state == '已验收'){
        obj[`class3`] = true
      }else if(state == '审核中'){
        obj[`class4`] = true
      }
      return obj
    },
    getFilter(value) {
      let state = this.stateIndex == 0 ? '' : this.stateList[this.stateIndex];
      let filter = '';
      if(this.typeIndex == 0){
        filter = '"1=1 and PATHID like \'%\'  and  ((\'' + state + '\'=\'\' and SJD.STATE!=\'废弃\') or (\'' + state +'\'!=\'\' and SJD.STATE=\''+ state 
        + '\'))  and  (SJD.INSPECTIONNAME like \'%'+ value +'%\' or \'' + value + '\'= \'\')  or  PATHID like \'%\' and  ((\'' + state + '\'=\'\' and SJD.STATE!=\'废弃\') or (\''
        + state +'\'!=\'\' and SJD.STATE=\'' + state + '\'))  and  (SJD.INSPECTIONNAME like \'%' + value + '%\' or \'' + value + '\'= \'\')   and  1=1"'
      } else {
        filter = '"1=1 and PATHID like \'%\'  and  ((\'' + state + '\'=\'\' and STATE!=\'废弃\') or (\'' + state +'\'!=\'\' and STATE=\''+ state 
        + '\'))  and  (NAME like \'%' + value + '%\' or \'' + value + '\'= \'\')  or  PATHID like \'%\' and  ((\'' + state + '\'=\'\' and STATE!=\'废弃\') or (\''
        + state +'\'!=\'\' and STATE=\'' + state + '\'))  and  (NAME like \'%' + value + '%\' or \'' + value + '\'= \'\')   and  1=1"'
      } 
      return filter;
    },
    getQueryFormData(){
      let state = this.stateList[this.stateIndex];
      let QueryFormData = '';
      if(this.typeIndex == 0){
        QueryFormData = '{"DIVENG":"","SUBDIVENG":"","SUBPROJECT":"","INSPECTIONNAME":"","STATE":"' + state + '","AUDITUSERNAME3":""}'
      }
      if(this.typeIndex == 1){
        QueryFormData = '{"DIVENG":"","SUBDIVENG":"","NAME":"","STATE":"' + state + '","AUDITUSERNAME3":""}'
      } else if(this.typeIndex == 2 ){
        QueryFormData = '{"DIVENG":"","NAME":"","STATE":"' + state + '","AUDITUSERNAME3":""}'
      } else if(this.typeIndex == 3 ){
        QueryFormData = '{"NAME":"","STATE":"' + state + '","AUDITUSERNAME3":""}'
      } 
      return QueryFormData
    },
    getOrderList() {
      let orderList = ''
      if(this.typeIndex == 0) {
        orderList = '[{"field":"CREATETIME","order":"DESC"}]'
      } else {
        orderList = '[]'
      }
      return orderList
    },

    getData(callback, failed) {
      if(this.viewId == ''){
        this.viewId = 'SXDT_JYPYS_LIST'
      }
      let QueryFormData = this.getQueryFormData();
      let orderList = this.getOrderList();
      var filter = this.getFilter(this.keyword);
      
      var params = '{"_method":"component.getListData","_param":{"bizObj":"' + this.bizObj  + '","service":"mobileSelectMore","fields":"*","filter":' + filter + ',"currentPageIndex":'
      + this.page + ',"pageSize":5,"orderList":'+ orderList + ',"QueryFormData":' + QueryFormData + '}}'
      // {"field": "INPUTDATE", "order": "DESC"}
      this.$ajax({
        method: 'post',
        url: this.COMMON_URL+'?_objName=' + this.bizObj + '&_viewId=' + this.viewId,
        data: {
          FixJSON: params
        }
      }).then((res) => {
        callback(res)
      }).catch(err => {
        failed()
      })
    },
    openInfo(item) {
      this.$store.commit('SET_CURRENT_ROW', item);
      this.$router.push({name: 'qualityInfo', query:{state: item.STATE}})
    },
    infinite(done) {//上划加载方法
      console.log("infinite");
      console.log(this.page);console.log(this.viewId);
      if(this.loading) {
        done();//TODO 啥意思
      } else {
        this.getData((res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == '200' && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]//TODO 啥意思
              this.page++;
              done()
            } else {
              done(true)//有错误的情况或者没有记录，传参true
            }
          }, () => {
            done(true)
        });
      }
    },
    refresh(done) {
      this.page = 1;
      console.log("refresh");
      console.log(this.page);
      this.loading = true;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
          done()
        } else {
          done(true);
        }
        this.loading = false;
      }, () => {
          done(true);
      });
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
        } else {
          this.list = [];
        }
      }, () => {
        this.list = [];
      });
    },
    chooseType(i) {
      if(i == 0){
        if(this.stateList[1] == '未验收'){
          this.stateList.splice(1,1)
        }
      }else{
        if(this.stateList[1] != '未验收') {
          this.stateList.shift();
          this.stateList.unshift('未验收');
          this.stateList.unshift('全部');
        }
      }
      this.typeIndex = i;
      this.page = 1;
      switch(i) {
        case 0: 
          this.bizObj = 'SXDT_JYPYS_DETAIL';
          this.viewId = 'SXDT_JYPYS_LIST'
          break;
        case 1: 
          this.bizObj = 'SZJC_FXPROQUALITYCHECK';
          this.viewId = 'SXDT_SUBPRJQUACHECK_LIST'
          break;
        case 2:
          this.bizObj = 'SZJC_FENBUPROQUALITYCHECK';
          this.viewId = 'SXDT_FBGCQUALITYACCEPT_LIST'
          break;
        case 3: 
          this.bizObj = 'SZJC_DANWEIPROQUALITYCHECK';
          this.viewId = 'SXDT_DWGCQUALITYACCEPT_LIST'
          break;
        default: 
          this.bizObj = 'SXDT_JYPYS_DETAIL';
          this.viewId = 'SXDT_JYPYS_LIST'
          break;
      }
      this.loading = true;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
          // this.setListByState();
        } else {
          this.list = [];
        }
        this.loading = false;
      }, () => {
        this.list = [];
      });
    },
    chooseState(i) {
      this.stateIndex = i;
      this.loading = true;
      this.page = 1;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
          // this.setListByState();
        } else {
          this.list = [];
        }
        this.loading = false;
      }, () => {
        this.list = [];
      });
    },
    setListByState() { 
      let list1 = [];
      let list2 = this.list
      this.newList = list2;
      if(this.stateIndex >= 0){
        list1 = list2.filter((it) =>{
        return it.STATE == this.stateList[this.stateIndex]
      }) ;
      this.newList = list1;
      }
    },
    close() {
      this.show = false;
      this.show1 = false
    }
  },
  computed: {
    // userInfo () {
    //   return this.$store.state.user
    // },
    // mainPop () {
    //   return this.$store.state.mainPop
    // }
  },
  watch: {
    '$route' (newR, oldR) {
      if(this.$store.state.needRefresh){
        this.refresh()
        this.$store.commit("needRefreshStatus",false)
      }
    },
  }
}
</script>

<style scoped>
  .card {
    background: #fff;
    /* margin: 10px 16px; */
    padding: 19px;
    border-radius: 4px;
    overflow: hidden;
  }

  .card-title {
    font-size: 18px;
  }
  .warning {
    color: red;
    padding: 0 5px;
    background-color: pink;
    text-align: center;
    width: 140px;
    line-height: 30px;
    font-size: 14px;
  }

  .gray-label {
    color: #9F9F9F;
    width: 155px;
  }
  .select{
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }
  .active{
    background: #242B80;
    color: #fff;
  }
  .title{
    display: flex;
    align-items: center;
    font-size: 16px
  }
  .bar{
    width: 3px;
    height: 13px;
    background: #A7AEFF;
    margin-right: 13px;
  }
  .num{
    display: flex;
    font-size: 14px;
    color: #343434;
    margin-left: 16px;
    margin-top: 14px;
  }
  .state{
    font-size: 11px;
    margin-top: 15px;
    margin-left: 23px;
  }
  .class1{
    color: #F32111
  }
  .class2{
    color: #FF6E04
  }
  .class3{
    color: #61AE82
  }
  .class4{
    color: #3C82F6
  }
  button{
    height: 40px;
    border: 0
  }
  ul{
    position: absolute;
    background: #fff;
    width: 50%;
    z-index: 2;
  }
  ul li{
    margin: 0 !important;
    height: 35px;
    line-height: 35px;
    z-index: 2;
    padding-left: 10px
  }
  .mask{
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.6;
    z-index: 1
  }
  .slide-enter-active {
    transition: all .3s ease;
  }
  .slide-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-enter, .slide-leave-to{
    transform: translateX(-100%);
    opacity: 0;
  }
</style>
